<template>

  <div>
    <div class="dw-table-form" style="padding-left: 60px;">
      <el-form :inline="true"  class="dw-form-inline" size="medium" style="margin-left: 500px" >
        <!--按照标题查询-->
        <el-form-item label="">
          <el-input
              v-model="name"
              placeholder="输入模糊查询条件"
              @keyup.enter.native="queryList"
          ></el-input> <!--加入了enter按钮调用方法-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadPost">
            <el-icon style="vertical-align: middle;">
              <search />
            </el-icon>
            <Span>查询</Span>
          </el-button>
          <el-button @click="resetParam">重置</el-button>
        </el-form-item>
      </el-form>
    </div>


    <!--表格 —— 表头部分-->
    <div class="dw-table-title">
      <el-row :span="24" type="flex" justify="space-between" align="middle">
        <el-col :span="4"><h3>我的租户</h3></el-col>
        <el-col :span="18" style="text-align: right;"> <el-button icon="Delete" @click="dialogVisible=true">回收站</el-button>
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>
    </div>

    <!--租户信息展示表格-->
    <el-table :data="tableData"
              stripe
              border
              style="width: 100%;"
              ref="multipleTableRef"
              @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" />
      <!--<el-table-column prop="id" label="Id" width="140" />--> <!--不显示id-->
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="email" label="电子邮箱" />
      <el-table-column prop="phone" label="电话号码" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="fee" label="费用" />
      <el-table-column prop="province" label="所在省份" />
      <el-table-column  label="操作">
        <template #default="scope"> <!--通过 scope 实现一行数据的传入-->
              <el-button-group class="ml-4">
                <el-tooltip class="item" effect="dark" content="编辑信息" placement="top-start">
                  <el-button type="primary" @click="mod(scope.row)">
                    <el-icon style="vertical-align: middle;">
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-popconfirm title="确定要删除嘛？" @confirm="del(scope.row.id)" style="margin-right: 5px"> <!--确认删除按钮-->
                  <template #reference>
                    <el-tooltip class="item" effect="dark" content="删除信息" placement="top-start">
                      <el-button type="primary">
                        <el-icon style="vertical-align: middle;">
                          <Delete />
                        </el-icon>
                      </el-button>
                    </el-tooltip>
                  </template>
                </el-popconfirm>
              </el-button-group>
          </template>
      </el-table-column>

    </el-table>

    <!--分页模块-->
    <div class="demo-pagination-block" style="margin-top: 10px; float: right;">
      <el-pagination
          v-model:currentPage="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <!--新增租户对话框-->
    <el-dialog
        v-model="dialogVisible"
        title="租户信息"
        width="30%"
        :before-close="handleClose"
    >

      <el-form :model="form" label-width="120px">
        <el-form-item label="租户id" >
          <el-input v-model="form.id" disabled/>
        </el-form-item>
        <el-form-item label="租户姓名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="费用">
            <el-input v-model="form.fee" disabled />
        </el-form-item>
        <el-form-item label="租户电话">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="租户邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="租户省份">
          <el-input v-model="form.province" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.sex" />
        </el-form-item>
      </el-form>

      <template #footer>

      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>

  </div>


</template>

<script>

import { Search } from '@element-plus/icons-vue'



export default {
  name: "TenantManage",
  data(){
    return{
      tableData:[], // 表格中数据,
      pageSize: 5,
      pageNum: 1,
      total: 0,
      name: '',
      dialogVisible: false,
      form: {
        id:'',
        username: '',
        sex: '',
        phone: '',
        email:'',
        permission: 1,
        lastLogin: '',
        province: '',
        fee: 0
      }
    }
  },

  methods: {

    loadGet(){
      this.$axios.get("/user/list").then(res=>{
        if(res.code == 200){
          console.log(res.data)
          this.tableData = res.data;

        } else{
          alert('获取数据失败')
        }
      })
    },
    loadPost(){
      this.$axios.post("/user/listPageTenant", {
        pageSize : this.pageSize,
        pageNum : this.pageNum, // 传递分页参数
        param:{
          name: this.name
        }
      }).then(res=>res.data).then(res=>{
        if(res.code == 200){
          console.log(res.data)
          this.tableData = res.data.records;
          this.total = res.data.total;
        } else{
          alert('获取数据失败')
        }
      })
    },
    handleSizeChange(val){ // 得到 PageSize 的方法
      //console.log(`${val} items per page`)
      this.pageNum = 1;
      this.pageSize = val;
      this.loadPost();
    },
    handleCurrentChange (val){ // 得到当前页的方法
      console.log(`current page: ${val}`)
      this.pageNum = val;
      this.loadPost();
    },
    resetParam(){
      this.name = '';
      this.loadPost();
    },
    addUser(){ // 弹出新增模态窗口
      this.dialogVisible = true
    },
    doMod(){
      this.$axios.post("/user/update", this.form
      ).then(res=>res.data).then(res=>{
        if(res.code == 200){
          this.dialogVisible = false;
          this.loadPost()
          this.resetParam()
        }
      })
    },
    save(){
      if(this.form.id == null || this.form.id == ''){
        this.$axios.post("/user/save", this.form
        ).then(res=>res.data).then(res=>{
          if(res.code == 200){
            this.dialogVisible = false;
            this.loadPost()
            this.resetParam()
          }
        })
      } else {
        this.doMod()
      }
    },
    del(id){ // 删除方法
      console.log(id);
      if(this.form.id == null || this.form.id == ''){
        this.$axios.get("/user/delete?id=" + id).then(res=>res.data).then(res=>{
          if(res.code == 200){
            this.dialogVisible = false;
            this.loadPost()
            this.resetParam()
          }
        })
      } else {
        this.doMod()
      }
    },
    mod(row){ // 修改方法
      console.log(row)
      // 赋值到表单
      this.form.id = row.id;
      this.form.username = row.username;
      this.form.email = row.email;
      this.form.phone = row.phone;
      this.form.sex = row.sex;
      this.form.province = row.province
      this.form.fee = row.fee
      this.dialogVisible = true;
    },

  },
  beforeMount() {
    this.loadPost();
  },
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
.dw-table-form{
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}
</style>